<template>
  <el-container style="height:100%">
    <el-header style="height: auto">
      <el-row>
        <el-col :span="8">

          <el-input
            placeholder="请输入公司"
            prefix-icon="el-icon-search"
            v-model="input21">
          </el-input>
        </el-col>

        <el-col :span="4">
          <el-button type="primary">搜索</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-row style="width:100%;">

        <el-alert
          title="区域排序"
          type="success"
          center
          :closable="false">
        </el-alert>
        <el-col :span="24">
          <!--<el-tabs v-model="activeName" >-->
            <!--<el-tab-pane label="广东区域" name="first">-->

              <el-table :data="list" v-loading.body="" border fit highlight-current-row
                        style="width: 100%;margin-left: 0%">

                <el-table-column align="center" label="序号" prop="id" width="80">
                  <template slot-scope="scope"><span>{{scope.row.px}}</span></template>
                </el-table-column>
                <el-table-column align="center" label="公司" prop="id" width="80">
                  <template slot-scope="scope"><span>{{scope.row.comp}}</span></template>
                </el-table-column>
                <el-table-column align="left" label="年度单耗计划" prop="fullCodeNo" width="200">
                  <template slot-scope="scope"><span>{{scope.row.aa}}</span></template>
                </el-table-column>
                <el-table-column align="center" label="月度总消耗" prop="explainText" width="200">
                  <template slot-scope="scope"><span>{{scope.row.bb}}</span></template>
                </el-table-column>


                <el-table-column align="center" label="月度总单耗" prop="category" width="200">
                  <template slot-scope="scope"><span>{{scope.row.cc}}</span></template>
                </el-table-column>

                <el-table-column align="left" label="月度单耗差" prop="time2">
                  <template slot-scope="scope"><span>{{scope.row.dd}}</span></template>
                </el-table-column>
                <el-table-column align="left" label="完成率" prop="time2">
                  <template slot-scope="scope"><span>{{scope.row.ee}}</span></template>
                </el-table-column>
                <el-table-column align="left" label="年度单耗" prop="time2">
                  <template slot-scope="scope"><span>{{scope.row.ff}}</span></template>
                </el-table-column>
                <el-table-column align="left" label="年度单耗完成率" prop="type" width="200">
                  <template slot-scope="scope"><span>{{scope.row.gg}}</span></template>
                </el-table-column>
              </el-table>


            <!--</el-tab-pane>-->
            <!--<el-tab-pane label="贵州区域" name="second">-->

            <!--</el-tab-pane>-->
          <!--</el-tabs>-->

          <el-col :span="24">
            <!--<el-button type="primary" @click="multipleSelectSubmit" icon="el-icon-share">批量审核</el-button>-->
          </el-col>
        </el-col>
      </el-row>


      <el-row style="    margin-top: 10vh;">
        <el-col :span="24">
          <div class="chart-container">
            <chart height="100%" width="100%"/>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <!--<el-footer>Footer</el-footer>-->
  </el-container>


</template>

<script>
  import chart from '@/pages/analysisManage/Charts/mixChart2'

  export default {
    name: "consumeCheck",
    components: {
      chart
    },

    data() {
      return {
        input21: '',
        activeName:'first',
        list:[

          {id:1,comp:'云南区域',aa:2.26,bb:157 , cc:1.36 	,dd:0.90 ,ee:'39.90%',ff:0.55 , gg:'76%'},
          {id:2,comp:'陕甘区域',aa:2.70,bb:259 , cc:1.62 	,dd:1.08 ,ee:'39.84%',ff:-0.03, gg:'101%'},
          {id:3,comp:'皖北区域',aa:1.94,bb:359 , cc:1.42 	,dd:0.52 ,ee:'27.00%',ff:0.05 , gg:'97%'},
          {id:4,comp:'川渝区域',aa:2.34,bb:361 , cc:1.80 	,dd:0.54 ,ee:'23.26%',ff:0.22 , gg:'90%'},
          {id:5,comp:'广东区域',aa:2.00,bb:476 , cc:1.64 	,dd:0.36 ,ee:'17.90%',ff:0.10 , gg:'95%'},








        ],
      }
    },
    mounted(){
    },
    methods:{
      tbclick(){

      }
    }
  }

</script>

<style >
  .chart-container{
    position: relative;
    width: 100%;
    height: calc(50vh);
  }
</style>
